<template>
  <div class="app-container">
    <vue-viewer multiple :thumb="imageList" list-ul-class="image-list" :full="imageList"> </vue-viewer>
  </div>
</template>

<script>
import pictureApi from '../api/picture'
export default {
  name: 'container',
  data() {
    return {
      imageList: []
    }
  },
  created() {
    this.fetchPictures()
  },
  methods: {
    // 获取图片信息
    fetchPictures() {
      pictureApi.showPictures().then(response => {
        if (response.code === 20000) {
          this.imageList = response.data.data
        } else {
          this.$message.error(response.message)
        }
      })
    }
  }
}
</script>

<style>
.image-list {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}

.image-list li {
  width: 25%;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
}

.image-list li img {
  width: 100%;
  height: 350px;
  vertical-align: middle;
  max-width: 100%;
  object-fit: cover;
}
</style>
